<template>
  <div>
    <div class="flex justify-between items-center mb-6">
      <h2 class="text-2xl font-bold">标签管理</h2>
      <div class="flex gap-4">
        <input v-model="newTag" type="text" placeholder="新标签" class="border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
        <button @click="addTag" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">添加</button>
      </div>
    </div>

    <table class="w-full border-collapse rounded-md overflow-hidden shadow-md bg-white">
      <thead class="bg-white">
        <tr>
          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">序号</th>
          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">标签</th>
          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(tag, index) in tags" :key="index" class="hover:bg-gray-50 transition duration-150 ease-in-out">
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ index + 1 }}</td>
          <td class="px-6 py-4 whitespace-nowrap">
            <input v-if="editingIndex === index" v-model="editedTag" type="text" class="border border-gray-300 rounded-md px-1 py-0.5 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
            <span v-else class="text-sm text-gray-900">{{ tag }}</span>
          </td>
          <td class="px-6 py-4 whitespace-nowrap">
            <div class="flex gap-2">
              <button v-if="editingIndex === index" @click="saveTag(index)" class="text-green-600 hover:text-green-800 font-medium">保存</button>
              <button v-else @click="startEdit(index)" class="text-yellow-600 hover:text-yellow-800 font-medium">编辑</button>
              <button @click="removeTag(index)" class="text-gray-600 hover:text-gray-800 font-medium">删除</button>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 初始化标签列表
const tags = ref<string[]>(['技术', '生活', '随笔']);
// 新标签输入框的值
const newTag = ref('');
// 当前正在编辑的标签索引
const editingIndex = ref(-1);
// 编辑时输入框的值
const editedTag = ref('');

// 添加标签的方法
const addTag = () => {
  if (newTag.value.trim()) {
    tags.value.push(newTag.value.trim());
    newTag.value = '';
  }
};

// 开始编辑标签的方法
const startEdit = (index: number) => {
  editingIndex.value = index;
  editedTag.value = tags.value[index];
};

// 保存编辑后的标签的方法
const saveTag = (index: number) => {
  if (editedTag.value.trim()) {
    tags.value[index] = editedTag.value.trim();
  }
  editingIndex.value = -1;
};

// 删除标签的方法
const removeTag = (index: number) => {
  tags.value.splice(index, 1);
};
</script>

<style scoped>
/* 可根据需要添加自定义样式 */
table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 0.375rem; /* 圆角 */
  overflow: hidden;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /* 阴影 */
}

th {
  padding: 0.75rem 1.5rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 500;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

td {
  padding: 1rem 1.5rem;
  white-space: nowrap;
  font-size: 0.875rem;
  color: #111827;
}

tr:hover {
  background-color: #f9fafb;
  transition: background-color 0.15s ease-in-out;
}
</style>